<template>
  <view class="container">
    <!-- 外层大框 -->
    <view class="outer-box">
      <!-- 内层滑动小框 -->
      <view class="inner-box" :style="innerBoxStyle"></view>
      <!-- 选项 -->
      <view class="tabs">
        <view 
          class="tab-item" 
          :class="{ active: current === 0 }" 
          @click="switchTab(0)"
        >
          <text>未付款</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: current === 1 }" 
          @click="switchTab(1)"
        >
          <text>待评价</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: current === 2 }" 
          @click="switchTab(2)"
        >
          <text>已付款</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0, // 当前选中的 tab
      tabWidth: 0, // 每个 tab 的宽度
    };
  },
  computed: {
    // 计算内层小框的样式
    innerBoxStyle() {
      return {
        width: `${this.tabWidth}px`,
        transform: `translateX(${this.current * this.tabWidth}px)`,
      };
    },
  },
  methods: {
    switchTab(index) {
      this.current = index; // 切换 tab
    },
  },
  mounted() {
    // 获取每个 tab 的宽度
    const query = uni.createSelectorQuery().in(this);
    query.select('.tab-item').boundingClientRect((res) => {
      this.tabWidth = res.width;
    }).exec();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.outer-box {
  position: relative;
  width: 300px;
  height: 50px;
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  overflow: hidden;
}

.tabs {
  display: flex;
  justify-content: space-around;
  height: 100%;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #666;
  z-index: 2; /* 确保文字在小框之上 */
}

.tab-item.active {
  color: #007aff; /* 选中时的文字颜色 */
}

.inner-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(0, 122, 255, 0.1); /* 小框的背景颜色 */
  border-radius: 25px;
  transition: transform 0.3s ease; /* 滑动动画 */
}
</style>